$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '点平均降雨量'
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: {
            categories: [
                '0点',
                '1点',
                '2点',
                '3点',
                '4点',
                '5点',
                '6点',
                '7点',
                '8点',
                '9点',
                '10点',
                '11点',
                '12点',
                '13点',
                '14点',
                '15点',
                '16点',
                '17点',
                '18点',
                '19点',
                '20点',
                '21点',
                '22点',
                '23点',
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '降雨量 (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '东京',
            data: [1, 2]
        }, {
            name: '纽约',
            data: [1, 2]
        }, {
            name: '伦敦',
            data: [1, 2]
        }, {
            name: '柏林',
            data: [1, 4]
        }]
    });
    show()
    setInterval(show, 10000);
    function show() {
        $.ajax({
            url: '/admin/system.html',
            type: 'post',
            success: function (data) {
                var cpu_status = data.cpu;
                var mem_status = data.mem;
                var storage_status = data.storage;
                console.log(data.network);
                $('.network_status').html(data.network)
                // CPU 仪表盘
                var cpuChart = echarts.init(document.getElementById("cpu"), 'macarons');
                var option_cpu = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    series: [
                        {
                            name: "CPU使用情况",
                            type: "gauge",
                            detail: {
                                formatter: "{value}%",
                                textStyle: {
                                    fontWeight: 'bolder',
                                    fontSize: 14,
                                }
                            },
                            title: {
                                textStyle: {
                                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 14,
                                    color: "#3522ff"
                                }
                            },
                            data: [
                                {
                                    value: cpu_status,
                                    name: "CPU"
                                }
                            ]
                        }
                    ]
                }
                cpuChart.setOption(option_cpu)
                // 内存 仪表盘
                var menChart = echarts.init(document.getElementById("mem"), 'macarons');
                var option_men = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    series: [
                        {
                            name: "内存使用情况",
                            type: "gauge",
                            detail: {
                                formatter: "{value}%",
                                textStyle: {
                                    fontWeight: 'bolder',
                                    fontSize: 14,
                                }
                            },
                            title: {
                                textStyle: {
                                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 14,
                                    color: "#3522ff"
                                }
                            },
                            data: [
                                {
                                    value: mem_status,
                                    name: "memory"
                                }
                            ]
                        }
                    ]
                }
                menChart.setOption(option_men)
                // 存储 仪表盘
                var storageChart = echarts.init(document.getElementById("storage"), 'macarons');
                var option_storage = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                            restore: {
                                show: false
                            },
                            saveAsImage: {
                                show: false
                            }
                        }
                    },
                    series: [
                        {
                            name: "根分区使用情况",
                            type: "gauge",
                            detail: {
                                formatter: "{value}%",
                                textStyle: {
                                    fontWeight: 'bolder',
                                    fontSize: 14,
                                }
                            },
                            title: {
                                textStyle: {
                                    // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 14,
                                    color: "#3522ff"
                                }
                            },
                            data: [
                                {
                                    value: storage_status,
                                    name: "storage"
                                }
                            ]
                        }
                    ]
                }
                storageChart.setOption(option_storage)
            }
        })
    }

    // 网络仪表盘
    // var networkChart = echarts.init(document.getElementById("network"), 'macarons');
    // var option_network = {
    //     tooltip: {
    //         formatter: "{a} <br/>{b} : {c}%"
    //     },
    //     toolbox: {
    //         show: true,
    //         feature: {
    //             mark: {
    //                 show: true
    //             },
    //             restore: {
    //                 show: false
    //             },
    //             saveAsImage: {
    //                 show: false
    //             }
    //         }
    //     },
    //     series: [
    //         {
    //             name: "网络使用情况",
    //             type: "gauge",
    //             detail: {
    //                 formatter: "{value}%",
    //                 textStyle: {
    //                     fontWeight: 'bolder',
    //                     fontSize: 14,
    //                 }
    //             },
    //             title: {
    //                 textStyle: {
    //                     // 其余属性默认使用全局文本样式，详见TEXTSTYLE
    //                     fontWeight: 'bolder',
    //                     fontSize: 14,
    //                     color: "#3522ff"
    //                 }
    //             },
    //             data: [
    //                 {
    //                     value: 91.22,
    //                     name: "network"
    //                 }
    //             ]
    //         }
    //     ]
    // }
    // networkChart.setOption(option_network)
});